/**
 * PagingItem module
 */

import React from 'react';

class PagingItem extends React.Component {
  handleOnSelectPage() {
    const { selectPage, page } = this.props;
    selectPage(page);
    return false;
  }
  handleOnRemovePage() {
    const { removePage, page } = this.props;
    if (confirm($._('Delete confirm'))) {
      removePage(page);
    }
    return false;
  }
  render() {
    const { page, focus, length } = this.props;
    return (
      <div className={`btg-page ${focus ? 'selected' : ''}`}>
        <div className={`wgt-page-${page.color}${focus ? ' wgt-page-defal ' : ' '}`} />
        <div className={`recta_left recta_div ${focus ? 'selected' : ''}`} />
        <div className={`recta_right recta_div ${focus ? 'selected' : ''}`} />
        <div className="sidebar-page">
              <a className="page-link" href={`#${page.page_id}`} onClick={() => this.handleOnSelectPage()}>
            <div className="editable">{page.title}</div>
          </a>
          <div onClick={() => this.handleOnRemovePage()} className="removePage" style={{ display: length < 2 ? 'none' : 'block' }} />
        </div>
      </div>
    );
  }
}
module.exports = PagingItem;
